<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>bind object + repeat</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>
    <polymer-element name="x-foo" attributes="obj">
      <template>
        <p>obj.foo is {{obj.foo}}</p>
      </template>
      <script>
        Polymer('x-foo', {
          //alwaysPrepare: true,
          createdCallback: function() {
            //console.log(this.localName + ': createdCallback!');
            this.super();
          },
          attached: function() {
            //console.log(this.localName + ': enteredView!');
          },
          ready: function() {
            //console.log(this.localName + ': created!');
          }
        })
      </script>
    </polymer-element>
    
    <polymer-element name="x-bind-obj">
      <template>
        <x-foo id="foo" obj="{{testObj}}"></x-foo>
        <div id="container">
          <template repeat="{{arr}}">
            <x-foo obj="{{}}"></x-foo>
          </template>
        </div>
      </template>
      <script>
        Polymer('x-bind-obj', {
          testObj: null,
          arr: null,
          ready: function() {
            this.testObj = {foo: 'single'};
            this.arr = [
              {foo: 'array 0'},
              {foo: 'array 1'},
              {foo: 'array 2'}
            ];
            this.onMutation(this.$.container, function() {
              this.test();
            });
          },
          test: function() {
            chai.assert.equal(this.$.foo.obj, this.testObj);
            function checkXFoo(xFoo) {
              var p = xFoo.shadowRoot.querySelector('p');
              chai.assert.isDefined(xFoo.obj.foo);
              chai.assert.equal(p.innerHTML, 'obj.foo is ' + xFoo.obj.foo);
            }
            checkXFoo(this.$.foo);
            var xfoos = this.$.container.querySelectorAll('x-foo');
            chai.assert.equal(xfoos.length, 3, 'there should be 3 xfoos from the repeat');
            Array.prototype.forEach.call(xfoos, function(x) {
              checkXFoo(x);
            });
            done();
          }
        });
      </script>
    </polymer-element>
    
    <x-bind-obj></x-bind-obj>
  </body>
</html>
